<template>
  <el-form-item label="使用说明" prop="description" :rules="rules" >
    <rich-editor  :initial-value="initValue" @change="handleTextChange" id-name="pack-desc"></rich-editor>
    <!-- <el-input
        class="common-form-width__610"
        type="textarea"
        placeholder="使用说明"
        v-model="modelValue"
        show-word-limit
        maxlength="500"
        :rows="8">
    </el-input> -->
  </el-form-item>
</template>

<script lang="ts" setup>
const props = withDefaults(defineProps<{
  modelValue: string,
  initValue:string,
}>(), {
  modelValue: '',
  initValue:''
})

const emits = defineEmits(['update:model-value'])
const modelValue = computed({
  set(newValue) {
    emits("update:model-value", newValue)
  },
  get() {
    return props.modelValue
  }
})
const handleTextChange=({ innerHTML }: { innerHTML: string })=>{
  emits("update:model-value", innerHTML)
}

const rules = [{message: '请输入使用说明', required: true, trigger: 'blur'}]
</script>

<style scoped lang="scss">
@use "@/components/goodsCenter/styles/common.scss";

</style>
